<template>
    <el-dialog v-model="isOpen" title="等间距法分组结果" :border="true" align-center>
        <el-descriptions column="1" border>
            <el-descriptions-item label="分组边界">
                <span v-for="(boundary, index) in result.boundaries" :key="index">
                    {{ boundary }}{{ index < result.boundaries.length - 1 ? ', ' : '' }}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="各组数据量">
                <el-descriptions column="1" border>
                    <el-descriptions-item
                        v-for="(count, range) in result.groupStats"
                        :label="range"
                        :key="range">
                        {{ count }}
                    </el-descriptions-item>
                </el-descriptions>
            </el-descriptions-item>
        </el-descriptions>

        <el-divider />

        <div ref="chartContainer" style="width: 100%;height: 400px" />

        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="isOpen = false">关闭</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { nextTick, ref, watch } from "vue"
import * as echarts             from "echarts"

let isOpen = defineModel()
let props  = defineProps([ "originalData", "result" ])

let chartContainer = ref(null)
let chartInstance  = ref(null)

watch(isOpen, (val) => {
    if(val){
        initChart()
    }
})

function initChart(){
    nextTick(() => {
        if (!chartContainer.value) return
        if (!props.result) return
        if (!props.result.groupStats) return

        if(!chartInstance.value){
            chartInstance.value = echarts.init(chartContainer.value)
        }

        // 准备分组数据
        const groups = Object.keys(props.result.groupStats)
        const counts = Object.values(props.result.groupStats)

        // 计算总数据量
        const totalCount = counts.reduce((sum, val) => sum + val, 0)

        const option = {
            tooltip: {
                trigger: 'item',
                formatter: (params) => {
                    return `${params.name}: ${params.value}个数据`
                }
            },
            grid: {
                left: '10%',
                right: '10%',
                bottom: '20%',
                top: '10%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: groups,
                name: '数据分组区间',
                axisLabel: {
                    rotate: 30
                }
            },
            yAxis: {
                type: 'value',
                name: '数据数量',
                minInterval: 1
            },
            series: [
                {
                    type: 'bar',
                    data: counts,
                    name: '分组数据量',
                    itemStyle: {
                        color: '#3498db'
                    },
                    label: {
                        show: true,
                        position: 'top',
                        formatter: (params) => `${params.value}`
                    }
                }
            ],
            annotation: {
                label: {
                    fontSize: 12,
                    color: '#333'
                },
                data: [
                    {
                        type: 'text',
                        position: ['50%', '95%'],
                        value: `数据总量: ${totalCount}`,
                        xAxisIndex: 0,
                        yAxisIndex: 0
                    }
                ]
            }
        }

        chartInstance.value.setOption(option)

        window.onresize = function(){
            chartInstance.value.resize()
        }
    })
}
</script>

<style lang="scss" scoped>
</style>
